<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://chances.com.cn/jsp/epgdata" prefix="epgdata"%>

<!DOCTYPE html>
<html>
<head>
	<title>SMART_TV</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<%@include file="/sites/weixin/js/common.jsp" %>
<%@include file="/sites/weixin/common/common_js.jsp" %>
<link rel="stylesheet" type="text/css" href="${_contextPath}/sites/weixin/css/wx.css" />
<style>.swiper-slide {margin-right:8%;}</style>
<body onload="init()">
<div id="app">
	<!-- 头部 -->
	<epgdata:content type="vod" code="${_context.contentCode}" var="vod"/>
	<epgutils:contentConvert var="seriesConvert" content="${vod}"/>
	<div class="row menu-row navbar-fixed-top">
		<div class="col-xs-2 menu-col"  onclick="onBackEvent();">
			<img src="${_templatePath}/images/back.png" class="menu-col-back"/>
		</div>
		<div class="col-xs-8 detail-title">${vod.title}</div>
		<div class="col-xs-2 menu-col" onclick="collect('${vod.contentCode}','${vod.title}',
			'${vod.poster}','vod','','${EPG_USER_SESSION.userId}','${_context.containerCode}')">
			<img id="collectImage" src="${_contextPath}/sites/weixin/images/wx_collect.png" class="menu-col-back"/>
		</div>
	</div>
	<!-- 剧集介绍 -->
	<div class="row row-detail" style="margin-top:4em;">
		<div class="col-xs-4 row-empty">
			<img  class="lazyImg content-image" src="${_contextPath}/sites/images/defaultBg_2.jpg" :data-original="resourcePath+vod.poster"/>
		</div>
		<div class="col-xs-8 col-content">
			<div class="detail-title-small">${vod.title}</div>
			<div class="detail-text"><span>类型：</span><span style="color:#aaaaaa">${seriesConvert.contentBaseTags}</span></div>	
			<div class="detail-text"><span>导演：</span><span style="color:#aaaaaa">${vod.director}</span></div>
			<div class="two-line"><span style="color:#000;">主演：</span>${vod.actors}</div>
			<div class="div-image-tv" onclick="playVod()">
				<img style="max-width:70px;" src="${_templatePath}/images/tvshow.png"/>
			</div>
		</div>
	</div>
	<div class="row detail-description">
		<div class="col-xs-12 row-empty"><span>简介：</span><span style="color:#aaaaaa">${vod.summaryMedium}</span></div>
	</div>
	
	<div class="index-line-detail" style="height:0.2em;"></div>
	
	<!-- 相关推荐 -->
	<div class="row row-detial-rel">
		<div class="col-xs-3" style="padding-left:0.4em;"><img src="${_templatePath}/images/xg.png" style="max-height: 2em;"/></div>
	</div>
	<div class="row row-empty">
		<template v-for="(item,index) in vodRelateCat.resultSet">
			<template v-if="index%3 == 0">
				<div class="row row-empty"></div>
			</template>
			<div class="col-xs-4 detail-rel" >
				<div style="overflow: hidden" :id="'vod_'+index" 
					@click="gotoLink(item.url,'rel_vod_'+index)">
					<img  class="lazyImg content-image" src="${_contextPath}/images/defaultBg_2.jpg" 
						:data-original="item.poster"/>
				</div>
				<div class="index-text" v-text="item.title"></div>
			</div>
		</template>
	</div>
	<div id="alertDiv" class="navbar-fixed-bottom detail-alert"></div>
</div>
<%@include file="/sites/weixin/common/bodyEndVm.jsp" %>
</body>
<script>
var vm = new Vue({
	el:"#app",
	data:{
		resourcePath:'${_resourcePath}',
		contextPath:'${_contextPath}',
		vod:'',
		vodRelateCat:''
	},
    mounted: function () {
		this.$nextTick(function () {
			this.getVod();
			this.getVodRelateCat();
			this.lazyLoad();
	 	});
    },
	methods:{
		getVod:function(){
			$.ajax({
				method:"get",
				url:"${_contextPath}/api/vod/${_context.contentCode}.json",
				async:false,
				success:function(data){
					/* console.log("vod");
					console.log(data); */
					vm.vod = data.result;
				}
			});
		},
		getVodRelateCat:function(){
			var params = {
					size:6,
					isRandom:true,
					p_idx:1,
					bizCode:"${_context.bizCode}",
					siteCode:"${_context.siteCode}",
					categoryCode:"${_context.containerCode}",
					type:'电影'
			};
			$.ajax({
				method:"get",
				//url:"${_contextPath}/api/categoryItemProxy/vod/${_context.containerCode}.json?size=6&random=true&bizCode=${_context.bizCode}&siteCode=${_context.siteCode}",
				url:"${_contextPath}/api/search/filter.json",
				data:params,
				async:false,
				success:function(data){
					console.log("related:");
					console.log(data);
					vm.vodRelateCat = data;
				}
			});
		},
		lazyLoad:function(){
			$(document).ready(function(){
				$(".lazyImg").lazyload({ 
			        placeholder : "images/defaultBg_3.jpg", 
			        effect : "fadeIn" 
		   			}); 
			});
		},
		startSwiper:function(){
			$(document).ready(function(){
			   var names = ["#scroll_menu_swiper"];
		   		$.each(names,function(i,val){
		   			 var swiper1 = new Swiper(val, {
		    			  	 slidesPerView: 'auto',
		       				 //spaceBetween: 10
		   			 });
		   		});
			 });
		},
		collect:collect,
		gotoLink:gotoLink
	}
});
function init(){
	initCollectImage('${vod.contentCode}');
}

function playVod(){
	var params = {
		userId:'${EPG_USER_SESSION.userId}',
		//stbNo:binds[0].stbNo,
		type:'vod',
		code:'${vod.contentCode}',
		prog:'',
		title:'${vod.title}',
		icon:'${vod.icon}'
	}
	play(params,"${personUrl}","playVod",callback);
}
function callback(){
	setTimeout("hideAlert('播放请求已发送')",2000);
}
</script>
</html>